{% extends "student/base.html" %}
{% block title %}可选课程{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
    <!-- 筛选栏 -->
    <div class="flex-1 max-w-md">
        <label for="filter" class="text-sm font-medium text-gray-700 mr-2">筛选课程：</label>
        <select id="filter" name="filter" class="px-4 py-2 border rounded-lg focus:border-primary">
            <option value="">全部课程</option>
            <option value="必修课">必修课</option>
            <option value="选修课">选修课</option>
            <option value="实验课">实验课</option>
            <option value="实践课">实践课</option>
        </select>
    </div>
</div>

<div class="bg-white rounded-lg shadow-md p-6">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程编号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学科</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任课教师</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课地点</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程类型</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody id="courseList">
                {% for course in available_courses %}
                <tr data-course-id="{{ course.id }}" class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_code }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.department }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.teacher.username }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.location }}</td>

                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ course.time.strftime('%Y-%m-%d %H:%M') }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_type }}</td>
                    <td class="px-6 py-4 text-right">
                        <button class="text-green-500 hover:text-green-700 select-btn" data-course-id="{{ course.id }}">
                            <i class="fa fa-plus mr-1"></i> 选课
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if not available_courses %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-book text-4xl text-primary/10 animate-spin"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">暂无可选课程</h3>
        <p class="text-gray-500 mb-6">请联系管理员获取更多课程信息</p>
    </div>
    {% endif %}
</div>



<script src="{{ url_for('static',filename='js/student_js/course_selection.js') }}"></script>
{% endblock %}